<template>
  <div id="pay-insurance-offer-compare">
    <section class="tags" :style="{top: tagsTop + 'px'}">
      <section class="this-public-company company-tag"></section>
      <section class="this-public-total total-tag">总价(元)</section>
      <template v-if="basics.length">
        <grey-header title="商业险"></grey-header>
        <section
          class="this-public-item item-tag"
          v-for="(item, index) in basics"
          :key="'basics-tag-' + index">
          {{ item.name | short }}
        </section>
      </template>
      <template v-if="others.length">
        <grey-header title="附加险"></grey-header>
        <section
          class="this-public-item item-tag"
          v-for="(item, index) in others"
          :key="'others-tag-' + index">
          {{ item.name | short }}
        </section>
      </template>
      <template v-if="compulsory.length">
        <grey-header title="交强险"></grey-header>
        <section
          class="this-public-item item-tag"
          v-for="(item, index) in compulsory"
          :key="'compulsory-tag-' + index">
          {{ item.name | short }}
        </section>
      </template>
    </section>
    <div class="content-wrap">
      <section class="content">
        <section class="this-public-company this-public-scroll-wrap content-companies">
          <span class="this-public-scroll-item">华安财险</span>
          <span class="this-public-scroll-item">安盛天平</span>
          <span class="this-public-scroll-item">鼎和财险</span>
          <span class="this-public-scroll-item">人保财险</span>
          <span class="this-public-scroll-item">北部湾保险</span>
        </section>
        <section class="this-public-total this-public-scroll-wrap content-total">
          <span class="this-public-scroll-item">{{ price.ha || '-' }}</span>
          <span class="this-public-scroll-item">{{ price.astp || '-' }}</span>
          <span class="this-public-scroll-item">{{ price.dh || '-' }}</span>
          <span class="this-public-scroll-item">{{ price.rb || '-' }}</span>
          <span class="this-public-scroll-item">{{ price.bbw || '-' }}</span>
        </section>
        <template v-if="basics.length">
          <grey-header title=""></grey-header>
          <ul>
            <li
              v-for="(item, index) in basics"
              :key="index"
              class="this-public-scroll-wrap this-public-item">
            <span
              class="this-public-scroll-item"
              v-for="(subItem, subIndex) in item.values"
              :key="subIndex">{{ subItem }}</span>
            </li>
          </ul>
        </template>
        <template v-if="others.length">
          <grey-header title=""></grey-header>
          <ul>
            <li
              v-for="(item, index) in others"
              :key="index"
              class="this-public-scroll-wrap this-public-item">
            <span
              class="this-public-scroll-item"
              v-for="(subItem, subIndex) in item.values"
              :key="subIndex">{{ subItem }}</span>
            </li>
          </ul>
        </template>
        <template v-if="compulsory.length">
          <grey-header title=""></grey-header>
          <ul>
            <li
              v-for="(item, index) in compulsory"
              :key="index"
              class="this-public-scroll-wrap this-public-item">
            <span
              class="this-public-scroll-item"
              v-for="(subItem, subIndex) in item.values"
              :key="subIndex">{{ subItem }}</span>
            </li>
          </ul>
        </template>
      </section>
    </div>
    <!-- todo -->
    <p>
      附加险：鼎和、安盛天平 不计免赔包含在主险中，华安 不计免赔单独计算。
    </p>
  </div>
</template>

<script>
  import GreyHeader from './grey-header.vue';
  export default {
    name: "pay-insurance-offer-compare",
    components: {
      GreyHeader
    },
    data() {
      return {
        price: {},
        tax: {},
        basics: [],
        others: [],
        compulsory: [],
        tagsTop: 0
      }
    },
    methods: {
      scroll: function () {
        this.tagsTop = -document.getElementById('pay-insurance-offer-compare').scrollTop;
      }
    },
    created() {
      this.$http.post({
        api: this.$api.INSURANCE_PRICE_COMPARE,
        params: {
          ha_model_id: this.$route.query.ha_model_id,
          astp_model_id: this.$route.query.astp_model_id,
          dh_model_id: this.$route.query.dh_model_id,
          rb_model_id: this.$route.query.rb_model_id,
          bbw_model_id: this.$route.query.bbw_model_id
        },
        success: (res) => {
          let prices =  res.data.data.crve;
          this.price = prices['总价'];
          this.tax = prices['车船税'];

          for (let key in prices) {
            if (prices.hasOwnProperty(key)) {
              if (prices[key].type == 1 && prices[key].insured_type == 1) {
                this.basics.push({
                  name: key,
                  values:  [
                    prices[key].ha ? prices[key].ha.price : '-',
                    prices[key].astp ? prices[key].astp.price : '-',
                    prices[key].dh ? prices[key].dh.price : '-',
                    prices[key].rb ? prices[key].rb.price : '-',
                    prices[key].bbw ? prices[key].bbw.price : '-'
                  ]
                });
              } else if (prices[key].type == 1 && prices[key].insured_type == 2) {
                this.others.push({
                  name: key,
                  values: [
                    prices[key].ha ? prices[key].ha.price : '-',
                    prices[key].astp ? prices[key].astp.price : '-',
                    prices[key].dh ? prices[key].dh.price : '-',
                    prices[key].rb ? prices[key].rb.price : '-',
                    prices[key].bbw ? prices[key].bbw.price : '-'
                  ]
                });
              } else if (prices[key].type == 2) {
                this.compulsory.push({
                  name: key,
                  values: [
                    prices[key].ha ? prices[key].ha.price : '-',
                    prices[key].astp ? prices[key].astp.price : '-',
                    prices[key].dh ? prices[key].dh.price : '-',
                    prices[key].rb ? prices[key].rb.price : '-',
                    prices[key].bbw ? prices[key].bbw.price : '-'
                  ]
                });
              }
            }
          }
        }
      })
    },
    mounted() {
      document.getElementById('pay-insurance-offer-compare').addEventListener('scroll', this.scroll);
      document.getElementById('pay-insurance-offer-compare').addEventListener('touchmove', this.scroll);
    }
  }
</script>

<style scoped lang="scss">

  #pay-insurance-offer-compare {
    $this-public-tag-width: 20%;
    $this-public-background: #c3e9ff;
    $this-public-bold-border: 2px solid #f5f5f5;
    $this-public-company-height: 7.5rem;
    $this-public-fs-large: 1.5rem;
    $this-public-fs-normal: 1.3rem;
    $this-public-fs-mini: 1.2rem;

    height: $size-as-parent;
    padding-left: $this-public-tag-width;
    overflow: scroll;

    .this-public-company {
      height: $this-public-company-height;
      background: $white;
      margin-bottom: 1rem;
    }

    .this-public-total {
      height: 5rem;
      line-height: 5rem;
      text-align: center;
      background: #e9f6ff;
    }

    .this-public-item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 5rem;
      color: #333;
      text-align: center;
      background: #fff;
      border-bottom: 1px solid #eee;
    }

    .this-public-scroll-wrap {
      font-size: 0;
      white-space: nowrap;

      >.this-public-scroll-item {
        display: inline-block;
        width: 88px;
        font-size: 1.2rem;
      }
    }

    >.tags {
      position: fixed;
      top: 0;
      left: 0;
      width: $this-public-tag-width;
      background: $this-public-background;
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);

      >.company-tag {
        border-right: $this-public-bold-border;
      }

      >.total-tag {
        font-size: $this-public-fs-normal;
        border-right: $this-public-bold-border;
      }

      >.item-tag {
        font-size: $this-public-fs-normal;
        padding: 0 3px;
        border-right: $this-public-bold-border;
      }
    }

    >.content-wrap {
      width: $size-as-parent;
      background: $this-public-background;
      overflow: scroll;

      >.content {
        display: inline-block;

        >.content-companies {
          color: #333;
          line-height: $this-public-company-height;
          text-align: center;

          >span {
            font-size: $this-public-fs-large;
          }
        }

        >.content-total {
          >span {
            color: #333;
          }
        }
      }
    }

    >p {
      padding: 10px;
    }
  }
</style>
